<template>
  <div class="allJob content">
    <div class="jobs">
      <jobListsVue ref='jobList' :jobLists="jobLists" :positionType="positionType"></jobListsVue>
      <loading v-if='loadingStatus'/>
      <p v-if="!loadStatus && !loadingStatus" class="end text-center">到底了～</p>
      <p v-else-if="!loadingStatus" class="end text-center">滚动屏幕加载更多...</p>
    </div>
  </div>
</template>

<script>
  import loading from "@/common/loading"
  import jobListsVue from './jobLists.vue'
  import {getPositons} from '@/controller'
  import {onScroll} from '@/common/scroll'
  import {eventBus} from '@/common/eventBus'
  import Bus from '../../controller/bus.js'

  export default {
    name: 'homeHeader',
    props: ['city'],
    data() {
      return {
        isListenScroll: true,
        jobHeight: 84,//每一条数据的高度
        jobLists: [],
        scrollTop: 0,
        positionType: 0,
        location: '南京',
        loadStatus: true,
        index: 0,
        jobTipHeight: 0
      }
    },
    components: {
      jobListsVue,
      loading
    },
    watch:{
      city(val){
        this.init();
      }
    },
    methods: {
      init() {
        this.$store.dispatch('setLoadingStatus',true);
        this.jobLists = [];
        //请求工作列表前十条数据
        getPositons({
          count: 100,
          city:this.city,
          index: this.index,
          positionType: this.positionType
        }).then((res) => {
          this.$store.dispatch('setLoadingStatus',false);
          if (res.code === 0) {
            console.log(res.data.length);
            if (res.data.length < 100) {
              this.loadStatus = false;
            }
            this.index += res.data.length;
            this.jobLists = this.jobLists.concat(res.data);
          } else {
            this.$toast.center('鉴权失败');
          }
        })
      },
    },
    mounted() {
      this.init();
      let vm = this
      // 用$on事件来接收参数
      Bus.$on('switchType', (data) => {
        this.$store.dispatch('setLoadingStatus',true);
        vm.positionType = data;
        this.num = vm.positionType;
        this.jobLists = [];
        this.index = 0
        //请求该类别的数据
        getPositons({
          city:this.city,
          count: 100,
          index: this.index,
          positionType: this.num
        }).then((res) => {
          this.$store.dispatch('setLoadingStatus',false);
          if (res.code === 0) {
            this.jobLists = res.data;
            console.log(res.data);
            this.index += res.data.length;
          } else {
            this.$toast.center('error');
          }
        });
      })
    },
    destroyed() {
      this.isListenScroll = false
    },
    computed:{
      loadingStatus(){
        console.log('hehe',this.$store.getters.getLoadingStatus)
        return this.$store.getters.getLoadingStatus
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .end {
    padding: 10px 0px;
    font-size: 12px;
    color: #aaa;
  }
</style>
